<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search">
				<view class="search-ico">
					<image lazy-load="true"  src="../../static/images/search-ico.png" class="search-ico"></image>
				</view>
				<view class="search-input">
					<input type="text" confirm-type="search" class="search-input" placeholder="所有商品" @confirm="seacrch_good" v-model="search_name">
					</view>
				<view class="close-btn" v-if="search_name" @click="cleanInput()">
					<image lazy-load="true"  src="../../static/images/close-btn.png" class="close-btn"></image>
				</view>
			</view>
		</view>
		<view class="banner-cloth">
			<image class="banner-cloth" :src="banner_img" mode="widthFix"></image>
		</view>
		<view class="key-word-box" v-if="category_list.length>5">
			<scroll-view scroll-x="true">
				<view class="key-word">
					<view v-for="(item,index) in category_list" :key="index" @click="goAllGoodsList(item.id)" class="tag" :class="{'active':category_id == item.id}">
						<image :src="item.logo" class="classify-img"></image>
						<view class="">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="min-box" v-if="category_list.length<6">
			<view v-for="(item,index) in category_list" :key="index" @click="goAllGoodsList(item.id)" class="tag" :class="{'active':category_id == item.id}">
				<image :src="item.logo" class="classify-img"></image>
				<view class="">{{item.name}}</view>
			</view>
		</view>
		<view class="key-word-box" v-if="style_list.length>5">
			<scroll-view scroll-x="true">
				<view class="key-word">
					<view class="title" v-for="(item,index) in style_list"  :key="index" @click="setActive(item.id)" :class="{'active':style_id == item.id}">{{item.name}}</view>
					<view class="title" @click="setRecommend()" :class="{'active':recommend == 1}">设计师最爱</view>
				</view>
			</scroll-view>
		</view>
		<view class="min-box" v-if="style_list.length<6">
			<view class="title" v-for="(item,index) in style_list"  :key="index" @click="setActive(item.id)" :class="{'active':style_id == item.id}">{{item.name}}</view>
			<view class="title" @click="setRecommend()" :class="{'active':recommend == 1}">设计师最爱</view>
		</view>
		<view class="item-list">
			<view class="item-box" v-for="(item,index) in goods_list" :key="index" @click="go_detail(item.store_sku_id)">
				<view class="item-img" >
					<image lazy-load="true"  :src="item.thumbnail" mode="aspectFit" class="img-list-1"></image>
				</view>
				<view class="item-info">
					<view class="item-name">{{item.spu_name}}</view>
				</view>
				<view class="item-info boxbox-1">
					<view class="item-price">￥{{item.real_price}}起</view>
					<view class="item-store-name">{{item.store_name}}</view>
				</view>
				<view class="item-info">
					<view class="item-price-del">￥{{item.price}}</view>
				</view>
			</view>

			<view class="no_msg" v-if="show_no_data">
				<image class="no_msg_img" src="../../static/images/nomsg.png" mode="widthFix"></image>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
	export default {
		data() {
			return {
				inputVal:'',
				banner_img:'',
				style_id:0,
				selectGood:false,
				category_id:'',
				search_name:'',
				p:1,
				per:20,
				category_list:[],
				goods_list:[],
				category_active:0,
				recommend:0,
				style_list:[],
				is_bottom:false,
				show_no_data:false,
				
			}
		},
		onLoad(e) {
			var self = this;
			this.$request.request({
				url:'/fabric/banner',
				data:{
					
				},
				success:function(res){
					if(res.code==200){
						var x = res.result;
						console.log(x)
						self.banner_img = self.$http_img(x.image)
					}else{
						
					}
				}
			});
			this.$request.request({
				url:'/fabric/category',
				data:{
					
				},
				success:function(res){
					if(res.code==200){
						var x = res.result;
						
						x.forEach((item,index)=>{
							x[index].logo = self.$http_img(item.logo)
						})
						self.category_list = x;
						self.category_id = self.category_list[0].id
						
						self.$request.request({
							url:'/fabric/style',
							data:{
								
							},
							success:function(res){
								if(res.code==200){
									var y = res.result;
									self.style_list = y;
									self.style_id = self.style_list[0].id;
									self.get_good_list()
								}else{
									
								}
							}
						});
					}else{
						
					}
				}
			});
			

			// #ifdef H5
			let share_time_line={
				title:self.$request.h5_share_name, // 分享标题
				link: self.$request.h5_share_url+'?page=cloth-area', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			let share_app_message={
				title: self.$request.h5_share_name, // 分享标题
				desc: '我发现了一个很不错的商城，买家具有超大实惠！', // 分享描述
				link: self.$request.h5_share_url+'?page=cloth-area', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			uni.setStorageSync('share_time_line',share_time_line);
			uni.setStorageSync('share_app_message',share_app_message);
			self.$request.wx_config()
			// #endif
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {
		      console.log(res.target)
		    }
		    return {
		      title: this.$request.share_title,
		      path: '/pages/index/index'
		    }
		  },
		methods: {
			cleanInput(){
				this.search_name = '';
				this.p = 1;
				this.goods_list=[];
				this.show_no_data = false;
				this.get_good_list();
				this.clearBtn = false;
			},
			setActive(id){
				if(this.style_id==id) return;
				uni.showLoading({
				    title: '加载中'
				});
				this.style_id=id
				this.p = 1;
				this.goods_list=[];
				this.show_no_data = false;
				this.get_good_list();
				
			},
			setRecommend(){
				this.recommend = this.recommend==0 ? 1 : 0 ;
				uni.showLoading({
				    title: '加载中'
				});
				this.p = 1;
				this.goods_list=[];
				this.show_no_data = false;
				this.get_good_list();
			},
			goAllGoodsList(id){
				if(this.category_id==id) return;
				uni.showLoading({
				    title: '加载中'
				});
				this.category_id=id
				this.show_no_data = false;
				this.p = 1;
				this.goods_list=[];
				this.get_good_list();
			},
			onReachBottom(){
				if(this.is_bottom) return;
				this.is_bottom = true;
				this.p++;
				this.get_good_list();
			},
			get_good_list(){
				var self = this;
				this.$request.request({
					url:'/fabric/list',
					data:{
						category_id:this.category_id,
						style_id:this.style_id,
						recommend:this.recommend,
						keywords:this.search_name,
						p:this.p,
						per:this.per
					},
					success:function(res){
						if(res.code==200){
							var x = res.result;
							uni.hideLoading();
							if(res.result.length<1){
								if(self.goods_list.length == 0){
									self.show_no_data = true
								}else{
									self.show_no_data = false
								}
								self.is_bottom = true;
								return false;
							}
							x.forEach((item,index)=>{
								x[index].thumbnail =self.$http_img(item.thumbnail);
								x[index].real_price = self.$money(item.real_price);
								x[index].price = self.$money(item.price);
							})
							// x = x.concat(x).concat(x); //测试
							self.goods_list =self.goods_list.concat(x);
							self.is_bottom = false;
							console.log(self.goods_list)
							
							
						}else{
							
						}
					},
					complete:function(){
						uni.hideLoading();
					}
				});
			},
			seacrch_good(){
				uni.showLoading({
				    title: '加载中'
				});
				this.p = 1;
				this.goods_list=[];
				this.get_good_list();
			},
			go_detail(id){
				uni.navigateTo({
				    url: '../local-store-item/local-store-item?id='+id
				});
			}
		}
	}
</script>

<style>
	@import url("cloth-area.css");
</style>
